<template>
  <div class="page-warp-view f">
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
      <div class="vm-menberCenter-container">
        <div class="vm-menberCenter-header pl50 mb50 ">
          <div class="vm-header-l pr40">
            <i class="userPhoto"></i>
          </div>
          <div class="vm-header-r">
            <h6 class="name">{{ userName }}</h6>
            <p class="userName">{{ companyName }}</p>
          </div>
        </div>
        <div class="vm-menberCenter-main">
          <ul class="vm-common-container pl40">
            <router-link tag="li" to="/business_transction" class="vm-common-item">
              <div class="vm-item-l">
                <i class="vm-icon2 gys"></i>
                <p>供应商协同</p>
              </div>
              <div class="vm-item-r">
                <i class="mint-cell-allow-right"></i>
              </div>
            </router-link>
            <router-link tag="li" to="/message" class="vm-common-item">
              <div class="vm-item-l">
                <i class="vm-icon sms"></i>
                <p>消息中心</p>
              </div>
              <div class="vm-item-r">
                <i class="mint-cell-allow-right"></i>
              </div>
            </router-link>
            <router-link tag="li" to="/menber_center/my_bill" class="vm-common-item">
              <div class="vm-item-l">
                <i class="vm-icon single"></i>
                <p>我的制单</p>
              </div>
              <div class="vm-item-r">
                <i class="mint-cell-allow-right"></i>
              </div>
            </router-link>
            <router-link tag="li" to="/menber_center/my_offer" class="vm-common-item">
              <div class="vm-item-l">
                <i class="vm-icon offer"></i>
                <p>我的报价</p>
              </div>
              <div class="vm-item-r">
                <i class="mint-cell-allow-right"></i>
              </div>
            </router-link>
            <router-link tag="li" to="/company" class="vm-common-item">
              <div class="vm-item-l">
                <i class="vm-icon2 company"></i>
                <p>公司信息</p>
              </div>
              <div class="vm-item-r">
                <i class="mint-cell-allow-right"></i>
              </div>
            </router-link>
          </ul>
        </div>
        <div class="vm-menberCenter-exit">
          <mt-button @click="exitLogin" v-if="isLogin">退出登录</mt-button>
        </div>
      </div>
    <vm-common-footer></vm-common-footer>
  </div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import vmCommonFooter from '@/components/vm-common-footer' // footer 组件
import { userIsLogin, userInfoByArguments } from '@/utils/userHandler.js'
export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        isLogin: userIsLogin(),
        userName: userInfoByArguments('name'),
        companyName: userInfoByArguments('companyName')
      }
    },
    created () {

    },
    methods: {
      exitLogin () {
        localStorage.clear();
        this.$toast('清除登录信息成功');
        window.setTimeout( () => {
          this.$router.push({
            path: '/index'
          });
        },2000 )
      }
    },
    components: {
        'vm-common-header': vmCommonHeader,
        'vm-common-footer': vmCommonFooter
    }
}
</script>

<style lang="scss" scoped>
  .vm-icon2 {
    background: url("../../static/images/member/icon.png") no-repeat;
    background-size: 315px 137px;
  }
  i.vm-icon2 {
    position: absolute;
    left: 0;
  }

  i.vm-icon2.gys {
    width: 40px;
    height: 44px;
    display: inline-block;
    background-position: -51px -35px;
  }
  i.vm-icon2.company {
    width: 45px;
    height: 40px;
    display: inline-block;
    background-position: -205px -39px;
  }
  .vm-menberCenter-container {
  height: 100%;
  padding-top: 38px;
  position: relative;
  .vm-menberCenter-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    height: 210px;
    width: 100%;
    .vm-header-l {
      i.userPhoto {
        background: url("../../static/images/menber_userPhoto.png") no-repeat;
        width: 150px;
        height: 150px;
        background-size: cover;
        display: inline-block;
      }
    }
    .vm-header-r {
      display: flex;
      flex-direction: column;
      h6.name {
        font-size: 36px;
        color: #000000;
        height: 65px;
        display: flex;
        justify-content: flex-start;
      }
      p.userName {
        font-size: 24px;
        color: #666;
        display: flex;
        justify-content: flex-start;
      }
    }
  }
  .vm-menberCenter-main {
    ul {
      background-color: #ffffff;
      li.vm-common-item {
        border-bottom: 1px solid #eeeeee; /* no */
        position: relative;
        min-height: 100px;
        i.vm-icon {
          position: absolute;
          left: 0;
        }
        i.vm-icon.sms {
          background-position: -3px -5px;
          width: 42px;
          height: 31px;
        }
        i.vm-icon.single {
          background-position: -7px -43px;
          width: 34px;
          height: 42px;
        }
        i.vm-icon.offer {
          background-position: -3px -87px;
          width: 41px;
          height: 41px;
        }
        .vm-item-l {
          display: flex;
          align-items: center;
          p {
            padding-left: 90px;
            color: #000000;
            font-size: 28px;
            font-weight: bold;
          }
        }
        .vm-item-r {
          margin-right: 30px;
          .mint-cell-allow-right {
            &:after {
              border: 2px solid #c8c8cd; /* no */
              border-bottom-width: 0;
              border-left-width: 0;
              content: " ";
              top: 50%;
              right: 40px;
              position: absolute;
              width: 5px;
              height: 5px;
              -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(45deg)
            }
          }
        }
      }
    }
  }
  .vm-menberCenter-exit {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    button {
      border-radius: 15px; /* no */
      width: 100%;
      height: 104px;
      font-size: 36px;
      background-color: #f34c4f;
      color: #fff;
    }
  }

}
</style>


